<template>
  <div id="home">
    <nav>
      <div id="title">
        <van-icon name="location-o" color="#fff" />
        <van-image width="1rem" height=".24rem" :src="logo" />
        <van-search
          height=".3rem"
          v-model="value"
          placeholder="请输入搜索关键词"
          background="#fff"
        />
        <van-icon name="shop-o" color="#fff" />
      </div>
      <van-tabs sticky>
        <van-tab
          scrollspy="true"
          :title="item.catename"
          v-for="item in topnav"
          :to="'/goodslist?id=' + item.id"
          :key="item.id"
        ></van-tab>
      </van-tabs>
    </nav>
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="1500"
      indicator-color="red"
      touchable
      loop
    >
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img class="imgUrl" :src="$img + item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="item in list" :key="item.id">
        <van-image :src="item.imgSrc" border></van-image>
        <p class="">{{ item.title }}</p>
      </van-grid-item>
    </van-grid>
    <div class="con">
      <div class="l">
        <div class="top">
          <span class="t1">{{ con_l_title1 }}</span>
          <span class="t2">{{ con_l_title2 }}</span>
          <img :src="con_l_img" alt="" />
        </div>
        <p class="m">{{ con_l_title3 }}</p>
        <div class="f">
          <span>{{ timeObj.h }}</span>
          <i>:</i>
          <span>{{ timeObj.m }}</span>
          <i>:</i>
          <span>{{ timeObj.s }}</span>
        </div>
      </div>
      <div class="r">
        <div class="top">
          <p class="r_t1">{{ con_r_title1 }}</p>
          <p class="r_t2">{{ con_r_title2 }}</p>
          <div>
            <span>{{ con_r_title3 }}</span>
            <img :src="con_l_img" alt="" />
          </div>
        </div>
        <div class="down">
          <p class="r_t3">{{ con_r_title4 }}</p>
          <p class="r_t4">{{ con_r_title5 }}</p>
          <div>
            <span>{{ con_r_title6 }}</span>
            <img :src="con_l_img" alt="" />
          </div>
        </div>
      </div>
    </div>
    <van-tabs type="card">
      <van-tab title="热卖商品">
        <van-card
          v-for="item in hotList"
          @click="goDetail(item.id)"
          :key="item.id"
          :price="item.price.toFixed(2)"
          :desc="item.goodsname"
          :title="item.goodsname"
          :thumb="$img + item.img"
        />
      </van-tab>
      <van-tab title="最新潮品">
        <van-card
          v-for="item in newsList"
          @click="goDetail(item.id)"
          :key="item.id"
          :price="item.price.toFixed(2)"
          :desc="item.goodsname"
          :title="item.goodsname"
          :thumb="$img + item.img"
        />
      </van-tab>
      <van-tab title="全部">
        <van-card
          v-for="item in goodsList"
          @click="goDetail(item.id)"
          :key="item.id"
          :price="item.price.toFixed(2)"
          :desc="item.goodsname"
          :title="item.goodsname"
          :thumb="$img + item.img"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getBanner, indexGoods, getCate, getseckill } from "@/util/axios";
import axios from "axios";
let timer = null;
export default {
  data() {
    return {
      value: "",
      logo: require("@/assets/images/index/white.png"),
      topnav: [],
      bannerList: [],
      list: [
        {
          id: 1,
          title: "限时秒杀",
          imgSrc: require("@/assets/images/index/seckill.png"),
        },
        {
          id: 2,
          title: "畅销精品",
          imgSrc: require("@/assets/images/index/top.png"),
        },
        {
          id: 3,
          title: "配置大牌",
          imgSrc: require("@/assets/images/index/brand.png"),
        },
        {
          id: 4,
          title: "小U自营",
          imgSrc: require("@/assets/images/index/selfsupport.png"),
        },
        {
          id: 5,
          title: "积分商城",
          imgSrc: require("@/assets/images/index/integral.png"),
        },
      ],
      con_l_title1: "限时秒杀",
      con_l_title2: "查看更多",
      con_l_img: require("@/assets/images/index/r.png"),
      con_l_title3: "每天0点场，好货秒不停",
      con_r_title1: "品牌上新",
      con_r_title2: "9点整，抢大牌",
      con_r_title3: "疯抢红包",
      con_r_title4: "日用好物",
      con_r_title5: "愿君多采撷",
      con_r_title6: "塞满奖券",
      hotList: [],
      newsList: [],
      goodsList: [],
      timeObj: {},
    };
  },
  mounted() {
    axios.all([getCate(), getBanner(), getseckill(), indexGoods()]).then(
      axios.spread((resCate, resBanner, resseckill, resGoods) => {
        // nav导航
        if ((resCate.code = 200)) {
          this.topnav = resCate.list;
        }
        //页面一加载获取轮播图
        if (resBanner.code == 200) {
          this.bannerList = resBanner.list;
        }
        if (resseckill.code == 200) {
          let { begintime, endtime } = resseckill.list[0];
          this.endtime = endtime;
          if (begintime > new Date().getTime()) {
            actionTime(begintime);
          } else {
            actionTime(endtime);
          }
          let _this = this;
          // 处理倒计时问题
          function actionTime(time) {
            timer = setInterval(() => {
              // time
              let now = new Date().getTime(); //当前时间毫秒数
              if (time < now) {
                // 活动已经开始
                // time此时要更换结束时间 endtime
                time = _this.endtime;
              }
              let stime = parseInt((time - now) / 1000), //剩余的秒数
                h = (parseInt(stime / 3600) + "").padStart(2, "0"),
                m = (parseInt((stime % 3600) / 60) + "").padStart(2, "0"),
                s = ((stime % 60) + "").padStart(2, "0");
              _this.timeObj = { h, m, s };
            }, 1000);
          }
        }
        //页面一加载获取首页商品展示
        if (resGoods.code == 200) {
          this.hotList = resGoods.list[0].content;
          this.newsList = resGoods.list[1].content;
          this.goodsList = resGoods.list[2].content;
        }
      })
    );
  },
  methods: {
    //跳转详情事件
    goDetail(id) {
      this.$router.push({
        path: "/goodsdeaitl",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="" scoped>
#home {
  margin-bottom: 0.5rem;
}
nav {
  overflow: hidden;
  box-sizing: border-box;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
}
#title {
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.van-icon {
  font-size: 0.24rem;
}
.van-search {
  padding: 0;
}
nav >>> .van-tabs__nav {
  background-color: transparent;
}
nav >>> .van-tab {
  color: #fff;
}
nav >>> .van-tabs__line {
  background-color: #fff;
}
.van-swipe {
  width: 100%;
  height: 2rem;
}
.imgUrl {
  width: 98%;
  height: 2rem;
  margin: auto;
}
.con {
  height: 1.95rem;
  background-color: #f2f2f2;
  padding: 0.1rem;
  box-sizing: border-box;
}
/* l */
.con .l {
  float: left;
  height: 1.75rem;
  width: 1.75rem;
  margin-right: 0.05rem;
  background: url("../assets/images/index/big.png") no-repeat;
}
.con .l .top {
  height: 0.17rem;
  line-height: 0.17rem;
  margin-top: 0.08rem;
  padding-left: 0.1rem;
}
.con .l .top .t1 {
  float: left;
  font-size: 0.07rem;
  color: #8baa4b;
}
.con .l .top .t2 {
  float: left;
  font-size: 0.1rem;
  color: #666;
  margin: 0 0.04rem 0 0.38rem;
}
.con .l .top img {
  float: left;
  margin-top: 0.03rem;
}
.con .l .m {
  margin-top: 0.08rem;
  height: 0.1rem;
  font-size: 0.06rem;
  color: #bcd38c;
  padding-left: 0.1rem;
}
.con .l .f {
  margin-top: 0.09rem;
  height: 0.18rem;
  padding-left: 0.1rem;
}
.con .l .f span {
  float: left;
  text-align: center;
  border-radius: 0.02rem;
  width: 0.18rem;
  height: 0.18rem;
  line-height: 0.18rem;
  color: #fff;
  background: linear-gradient(#85a642, #afca77);
  font-size: 0.06rem;
}
.con .l .f i {
  float: left;
  color: #adc975;
  margin: 0 0.02rem;
  font-size: 0.06rem;
}
/* r */
.con .r {
  float: left;
  width: 1.75rem;
  height: 1.75rem;
}
.con .r .top {
  height: 0.85rem;
  margin-bottom: 0.05rem;
  background: url("../assets/images/index/small.png") no-repeat;
  padding-left: 0.1rem;
}
.con .r .top .r_t1 {
  padding-top: 0.1rem;
  font-size: 0.16rem;
  color: #ff6040;
}
.con .r .top .r_t2 {
  margin: 0.08rem 0 0.02rem 0;
  font-size: 0.1rem;
  color: #ffa897;
}
.con .r .top div {
  height: 0.2rem;
  line-height: 0.2rem;
  width: 0.7rem;
  background-color: #ff6848;
  border-radius: 0 0.1rem 0.1rem 0;
}
.con .r .top div span {
  float: left;
  font-size: 0.12rem;
  color: #fff;
  padding-left: 0.05rem;
}
.con .r .top div img {
  float: left;
  margin: 0.06rem 0 0 0.04rem;
}
/* down */
.con .r .down {
  height: 0.85rem;
  background: url("../assets/images/index/02.png") no-repeat;
  padding-left: 0.1rem;
}
.con .r .down .r_t3 {
  padding-top: 0.1rem;
  font-size: 0.16rem;
  color: #af40ff;
}
.con .r .down .r_t4 {
  margin: 0.08rem 0 0.02rem 0;
  font-size: 0.1rem;
  color: #d08fff;
}
.con .r .down div {
  height: 0.2rem;
  line-height: 0.2rem;
  width: 0.7rem;
  background-color: #e479ff;
  border-radius: 0 0.1rem 0.1rem 0;
}
.con .r .down div span {
  float: left;
  font-size: 0.12rem;
  color: #fff;
  padding-left: 0.05rem;
}
.con .r .down div img {
  float: left;
  margin: 0.06rem 0 0 0.04rem;
}
</style>